﻿@using MY.ShoppingBackstage.Model;
@{   
    var Pic = ViewBag.Pic as Pic;
    var product = ViewBag.product as List<Product_Spu>;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="~/layui/layui.js"></script>
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/dist/echarts.js" type="text/javascript"></script>

    <script src="~/js/TimeFormat.js"></script>
    <script src="~/js/jquery.dataTables.min.js"></script>
    <script src="~/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/js/hsCheckData.js" type="text/javascript"></script>
    <title>添加图片</title>
</head>
<body>
    <div class="margin inside_pages clearfix">
        <div class="add_style clearfix relative ">
            <ul class="add_conent">
                <li class=" clearfix">
                    <label class="label_name">
                        <i>*</i>商品：
                        <input type="hidden" value="@Pic.Pic_Id" id="Pic_Id" />
                    </label>
                    <select id="ProductId">
                        @foreach (var item in product)
                        {
                            <option value="@item.Id">@item.Name</option>
                        }
                    </select>
                </li>
                <li class=" clearfix">
                    <label class="label_name"><i>*</i>图片排序：</label>
                    @{
                        var orderby = "";
                        if (Pic.Pic_Order != 0)
                        {
                            orderby = Pic.Pic_Order.ToString();
                        }
                    }
                    <input name="" type="text" id="Pic_Order" value="@orderby" class="add_text form-control" style="width:80px" />
                </li>
                <li class=" clearfix">
                    <label class="label_name"><i>*</i>是否主图：</label>
                    @if (Pic.Is_Master == 1)
                    {
                        <label class="l_f checkbox_time">
                            <input name="Is_Master" type="checkbox" value="1" class="add_text form-control layui-btn-checked" style="width:80px" checked />
                            <span class="lbl">是</span>
                        </label>
                    }
                    else
                    {
                        <label class="l_f checkbox_time">
                            <input name="Is_Master" type="checkbox" value="0" class="add_text form-control" style="width:80px" />
                            <span class="lbl">是</span>
                        </label>
                    }

                </li>
                <li class=" clearfix">
                    <label class="label_name"><i>*</i>是否有效：</label>
                    @if (Pic.Pic_Status == 1)
                    {
                        <label class="l_f checkbox_time">
                            <input name="Pic_Status" type="checkbox" value="1" class="add_text form-control" style="width:80px" checked />
                            <span class="lbl">是</span>
                        </label>
                    }
                    else
                    {
                        <label class="l_f checkbox_time">
                            <input name="Pic_Status" type="checkbox" value="0" class="add_text form-control" style="width:80px" />
                            <span class="lbl">是</span>
                        </label>
                    }
                </li>
                <li class=" clearfix">
                    <label class="label_name">品牌图片：</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1"  width="80" height="80" src="@Pic.Pic_Url" />
                            <p id="demoText"></p>
                        </div>
                    </div>
                </li>

                <li class=" clearfix">
                    <label class="label_name">图片描述：</label>
                    <textarea name="" id="Description" style="width:100%;height:100px;" class="textarea" onkeyup="checkLength(this);">
                        @Pic.Pic_Desc
                    </textarea>
                    <span class="wordage">剩余字数：<span id="sy" style="color:Red;">500</span>字</span>
                </li>

            </ul>
            <div class="Button_operation btn_width">
                <button class="btn button_btn bg-deep-blue" onClick="article_save_submit()" type="button">保存</button>
                <button class="btn button_btn bg-gray" type="button">取消</button>
            </div>
        </div>
    </div>
</body>
</html>
<script>

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        var id = 0;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/FileUpload/UploadImage'
            , done: function (res) {
                //如果上传失败
                if (res.Success) {
                    $('#demo1').attr('src', res.Url); //图片链接（base64）
                    $('#demo1').attr('width', 80);
                    $('#demo1').attr('height', 80);
                } else {
                    layer.msg(res.info, function () { })
                }
                //上传成功
            }
            , error: function () {
                layer.msg("上传异常");
            }
        });

    });
    //表单提交
    function article_save_submit() {
        var data = {};
        data.Pic_Id = $("#Pic_Id").val();
        data.ProductId = $("#ProductId").val();
        data.Pic_Url = $("#demo1").attr('src');
        data.Pic_Desc = $("#Description").val();//描述
        data.Pic_Order = $("#Pic_Order").val();//排序
        var Pic_Status = 0;
        if ($("input[name='Pic_Status']").is(':checked')) {
            Pic_Status = 1;
        }
        data.Pic_Status = Pic_Status;//是否有效
        var Is_Master = 0;
        if ($("input[name='Is_Master']").is(':checked')) {
            Is_Master = 1;
        }
        data.Is_Master = Is_Master;//是否主图
        $.ajax({
            type: "post",
            url: "/FileUpload/picAddORUpdate",
            data: data,
            success: function (result) {
                layer.msg(result.Info, { icon: 1, time: 2000, shade: 0.2 }, function () {
                    if (result.Success) {
                        location.href = "/FileUpload/Pic_Manage";
                    }
                });
            }
        })
    }
</script>
<script>
    function checkLength(which) {
        var maxChars = 500;
        if (which.value.length > maxChars) {
            layer.open({
                icon: 2,
                title: '提示框',
                content: '您出入的字数超多限制!',
            });
            // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
            which.value = which.value.substring(0, maxChars);
            return false;
        } else {
            var curr = maxChars - which.value.length; // 减去 当前输入的
            document.getElementById("sy").innerHTML = curr.toString();
            return true;
        }
    }
    $(function () {
        var ue = UE.getEditor('editor');
    });
    $(document).ready(function () {
        var spotMax = 8;
        if ($('div.images_Upload').size() >= spotMax) { $(obj).hide(); }
        $("#add_Upload").on('click', function () {
            var cid = $('.images_Upload').each(function (i) { $(this).attr('id', "Uimages_Upload_" + i) });
            addSpot(this, spotMax, cid);
        });
    });
    laydate(start);
    laydate(end);
    /*********滚动事件*********/
    $("body").niceScroll({
        cursorcolor: "#888888",
        cursoropacitymax: 1,
        touchbehavior: false,
        cursorwidth: "5px",
        cursorborder: "0",
        cursorborderradius: "5px"
    });
</script>
